<script setup lang="ts">
import { useMenus } from '@/composables/useMenus'

const { allMenus, getAllMenus, handleDelete } = useMenus()
onMounted(async () => {
  await getAllMenus()
})
</script>
<template>
  <div class="menu">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-button class="button" @click="$router.push({ name: 'createEdit' })">新增菜单</el-button>
        </div>
      </template>
      <el-table :data="allMenus" border stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="180" align="center" />
        <el-table-column prop="name" label="菜单名称" align="center" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="icon" label="菜单图标" align="center" />
        <el-table-column prop="orderNum" label="排序" align="center" />
        <el-table-column label="操作" align="center" v-slot="scoped">
          <el-button type="primary" @click="$router.push({ name: 'menu-edit', params: { id: scoped.row.id } })">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scoped.row.id)">删除</el-button>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: auto;
}
</style>
